@import "./iconfont.less";

/****************************************/
@hd: 2;

/**
* color
*/
@red: #f66;
@blue: #39f;
@green: #9c3;
@orange: #f93;
@gold: #fc0;
@red-light: pink;
@blue-light: lightblue;
@green-light: lightgreen;
@orange-light: #EACDA0;

@theme-color: #8A9DEA;
@theme-color-deep: rgba(0, 0, 0, 0.1);
@theme-color-light: #F5F5F5;

@bg-color: #EFF1F3;
@bg-color-light: #F5F5F5;

@front-color: #F58B54;
@front-color-sub: #EACDA0;

@text-color: #4B4F52;
@text-color-sub: #798995;
@text-color-light: #BBC3C9;

@border-color: #D9D9D9;
@border-color-light: #F5F5F5;

/**
* size
*/
@base-size: 8px * @hd;

@text-size: 14px * @hd;
@text-size-bigger: 18px * @hd;
@text-size-big: 16px * @hd;
@text-size-small: 12px * @hd;
@text-size-mini: 10px * @hd;

/****************************************/
page, body {
  height: 100%;
  line-height: 1.7;
  font-size: @text-size;
  color: @text-color;
  box-sizing: border-box;
}

.img {
  width: 100%;
}

.iconfont {
  display: inline-block;
  width: 20px * @hd;
  font-size: @text-size;
  text-align: center;
}

/**
* title
 */
.base-title {
  display: block;
  height: @base-size * 6;
  line-height: @base-size * 6;
  font-size: @text-size-big;
  color: @text-color;
  font-weight: bold;
}

.spacing-title {
  padding-left: @base-size * 2;
  .base-title;
  letter-spacing: 2px;
}

.common-title-with-bar {
  position: relative;
  margin-left: @base-size * 2;
  padding-left: @base-size * 1.5;
  .base-title;

  &:before {
    content: " ";
    position: absolute;
    top: 16px * @hd;
    left: 0;
    display: inline-block;
    width: @base-size / 2;
    height: 16px * @hd;
    background-color: @green;
  }
}

.no-wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.panel {
  .head {
    .title {
      .common-title-with-bar;
    }

    &.with-border {
      border-bottom: 1px solid @border-color;
    }
  }

  .body {
    position: relative;

    &.with-padding {
      padding: 0 @base-size * 2 @base-size * 2;
    }
  }
}